<template>
    <cl-crud ref="Crud">
        <cl-view-head v-if="route.query.id||route.query.roomId" />
        <cl-row>
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <!-- <cl-add-btn /> -->
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <!-- 筛选模式 -->
            <cl-filter label="模式">
                <cl-select prop="mode" :options="options.mode" />
            </cl-filter>
            <!-- 筛选难度 -->
            <cl-filter label="难度">
                <cl-select prop="difficulty" :options="options.difficulty" />
            </cl-filter>
            <!-- 筛选状态 -->
            <cl-filter label="状态">
                <cl-select prop="status" :options="options.status" />
            </cl-filter>
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <!-- <cl-search-key placeholder="搜索备注" /> -->
        </cl-row>

        <cl-row>
            <!-- 数据表格 -->
            <cl-table ref="Table">
                <!-- 玩家名称 -->
                <template #column-ownerNickname="{ scope }">
                    <span>{{ scope.row.playerId?scope.row.ownerNickname:"试玩玩家" }}</span>
                </template>
                <!-- 时长 -->
                <template #column-duration="{ scope }">
                    <span>{{ moment(moment(scope.row.updateTime).diff(moment(scope.row.createTime))).format('m分s秒')}}</span>
                </template>
            </cl-table>
        </cl-row>

        <cl-row>
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </cl-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert" />
    </cl-crud>
</template>

<script lang="ts" name="game-record" setup>
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { reactive } from 'vue';
import moment from 'moment';

const { service, route } = useCool();
// 选项
const options = reactive({
	mode: [
		{ label: '单人', value: 0 },
		{ label: '多人', value: 1 },
		{ label: '联机', value: 2 }
	],
	difficulty: [
		{ label: '简单', value: 0 },
		{ label: '中等', value: 1 },
		{ label: '困难', value: 2 }
	],
	status: [
		{ label: '已开始', value: 0 },
		{ label: '游戏过关', value: 1, type: 'success' },
		{ label: '游戏失败', value: 2, type: 'danger' },
		{ label: '中途退出', value: 3, type: 'danger' },
		{ label: '超时退出', value: 4, type: 'danger' }
	]
});

// cl-upsert
const Upsert = useUpsert({});

// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ label: '关卡信息', prop: 'levelName', minWidth: 120 },
		{ label: '玩家信息', prop: 'ownerNickname', minWidth: 140 },
		{ label: '玩家信息', prop: 'memberNickname', minWidth: 140 },
		{ label: '得分', prop: 'fraction', minWidth: 120 },
		{ label: '时长', prop: 'duration', minWidth: 120 },
		{ label: '模式', prop: 'mode', dict: options.mode, minWidth: 100 },
		{ label: '状态', prop: 'status', dict: options.status, minWidth: 100 },
		{ label: '备注', prop: 'remark', showOverflowTooltip: true, minWidth: 200 },

		{
			label: '创建时间',
			prop: 'createTime',
			minWidth: 170,
			sortable: 'desc',
			component: { name: 'cl-date-text' }
		},
		{
			label: '更新时间',
			prop: 'updateTime',
			minWidth: 170,
			sortable: 'custom',
			component: { name: 'cl-date-text' }
		},
		{ type: 'op', buttons: ['delete'] } //'edit',
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.game.record
	},
	app => {
		app.refresh({
			playerId: route.query.id,
			roomId: route.query.roomId
		});
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>
